<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>gallery</title>
	<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<!-- 头部开始 -->
	<div class="head w">
		<div class="h-inner">
			<div class="h-left">YourLOGO</div>
			<div class="h-right clearfix">
				<ul>
					<li><a href="#">首页</a></li>
					<li><a href="#">文章</a></li>
					<li><a href="#">作品</a></li>
					<li><a href="#">关于</a></li>
				</ul>
			</div>
		</div>
		<div class="h-icon">
			<a href="https://github.com/">
				<img src="img/icon-github.png"  />
			</a>
		</div>
	</div>
	<!-- 头部结束 -->
<!-- gallery-main开始 -->
<div class="gallery-main">
	<div class="one">
		<input type="text" value="Keywords" />
	</div>
	<div class="two">
	    <h4>人气排行榜</h4>
	</div>
	<div class="three">
		<div class="tab">
			<ul>
				<li><a href="#">ALL</a></li>
				<li><a href="#">JavaScript Util Functions</a></li>
				<li><a href="#">UI Components</a></li>
				<li><a href="#">Framework</a></li>
				<li><a href="#">Applicationgs</a></li>
			</ul>
		</div>

		<div class="container">
			<div class="waterfall">
				<div class="item">
					<img src="img/p-center.jpg" alt="" />
					<p>这里是内容</p>
				</div>
				<div class="item">
					<img src="img/p-center.jpg" alt="" />
					<p>这里是内容</p>
				</div>
				<div class="item">
					<img src="img/p-left.jpg" alt="" />
					<p>这里是内容</p>
				</div>
			</div>
			<div class="waterfall">
				<div class="item">
					<img src="img/p-left.jpg" alt="" />
					<p>这里是内容</p>
				</div>
				<div class="item">
					<img src="img/p-left.jpg" alt="" />
					<p>这里是内容</p>
				</div>
				<div class="item">
					<img src="img/p-center.jpg" alt="" />
					<p>这里是内容</p>
				</div>
			</div>
			<div class="waterfall">
				<div class="item">
					<img src="img/p-center.jpg" alt="" />
					<p>这里是内容</p>
				</div>
			</div>
		</div>

		<div class="tr-bottom">
			<a href="#">点击查看更多</a>
		</div>
	</div>
</div>
	<!-- gallery-main结束 -->
<!-- footer开始 -->
	<div class="footer w">
		<div class="f-head clearfix">
			<ul>
				<li>主页</li>
				<li>文章</li>
				<li>作品</li>
				<li>关于</li>
			</ul>
		</div>
		<div class="f-xian"></div>
		<div class="f-main clearfix">
			<div>
				<ul>
					<h4>学习资料</h4>
					<li><a href="#">link</a></li>
					<li><a href="#">link</a></li>
					<li><a href="#">link</a></li>
					<li><a href="#">link</a></li>
					<li><a href="#">link</a></li>
					<li><a href="#">link</a></li>
				</ul>
			</div>
			<div>
				<ul>
					<h4>友情链接</h4>
					<li><a href="#">link</li>
					<li><a href="#">link</li>
					<li><a href="#">link</li>
					<li><a href="#">link</li>
				</ul>
			</div>
			<div>
				<ul>
					<h4>学习资料</h4>
					<li><a href="#">link</a></li>
					<li><a href="#">link</a></li>
					<li><a href="#">link</a></li>
					<li><a href="#">link</a></li>
					<li><a href="#">link</a></li>
					<li><a href="#">link</a></li>
				</ul>
			</div>
			<div>
				<ul>
					<h4>友情链接</h4>
					<li><a href="#">link</a></li>
					<li><a href="#">link</a></li>
					<li><a href="#">link</a></li>
					<li><a href="#">link</a></li>
					<li><a href="#">link</a></li>
					<li><a href="#">link</a></li>
				</ul>
			</div>
			<div>
				<ul>
					<h4>友情链接</h4>
					<li><a href="#">link</li>
					<li><a href="#">link</li>
					<li><a href="#">link</li>
					<li><a href="#">link</li>
				</ul>
			</div>
		</div>
		<div class="f-end">
			<div>版权信息</div>
			<div><img src="img/icon-github.png" alt="" /></div>
		</div>
	</div>
	<!-- footer结束 -->
</body>